import React from "react";
import { renderRoutes } from "react-router-config";
import { NavLink } from "react-router-dom";
import { Top, Tab, TabItem } from "./style";

const Home = (props) => {
  const { route } = props;
  return (
    <>
      {/* 顶部栏区域 */}
      <Top>
        <span className="iconfont menu">&#xe65c;</span>

        <Tab>
          <NavLink to="/recommend" activeClassName="selected">
            <TabItem>
              <span> 推荐 </span>
            </TabItem>
          </NavLink>
          <NavLink to="/singers" activeClassName="selected">
            <TabItem>
              <span> 歌手 </span>
            </TabItem>
          </NavLink>
          <NavLink to="/rank" activeClassName="selected">
            <TabItem>
              <span> 排行榜 </span>
            </TabItem>
          </NavLink>
        </Tab>

        <span className="iconfont search">&#xe62b;</span>
      </Top>

      {renderRoutes(route.routes)}
    </>
  );
};

export default React.memo(Home);
